<template>
	<view class="login">
		<!-- 状态栏 -->
		<view class="status_bar"></view>
		<!-- 顶部 -->
		<view class="login-top">
			<u-icon name="close" @click="ToMy"></u-icon>
			<view class="top-title">手机号登录/注册</view>
			<view class="top-txt">欢迎登录</view>
			<view class="top-input">
				<u-field v-model="sends.mobile" label="+86" label-width="80" maxlength="11" placeholder="请输入手机号"
					placeholder-style="color:#9A9A9A">
				</u-field>
			</view>
			<button class="top-btn" @click="getSend">获取验证码</button>
		</view>
		<!-- 底部 -->
		<view class="login-bom">
			<view class="bom-title">其他方式登录
				<view class="bor-le"></view>
				<view class="bor-rg"></view>
			</view>
			<view class="bom-img">
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="btn"></button>
				<image src="/static/image/weixin.png" class="img"></image>
			</view>
			<view class="footer-box">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" @change="checkboxChange"></u-checkbox>
				</u-checkbox-group>
				<view>登录即代表同意<text class="user" @click="userone">《用户协议》,</text> <text class="user"
						@click="usertwo">《隐私政策》</text> 及
					<text class="user" @click="usertherr">《第三方SDK类服务商说明》</text>
				</view>
			</view>
		</view>

		<!-- 弹框 -->
		<u-popup v-model="show" mode="bottom" border-radius="20" :customStyle="{margin: '0 30rpx'}">
			<view class="pop-box">
				<view class="pop-title">请阅读并同意以下条款</view>
				<view class="pop-txt">登录即代表同意<text class="user" @click="userone">《用户协议》,</text> <text class="user"
						@click="usertwo">《隐私政策》</text> 及
					<text class="user" @click="usertherr">《第三方SDK类服务商说明》</text>
				</view>
				<button class="btnone" @click="consent">同意并继续</button>
				<button class="btntwo" @click="noconsent">不同意</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { ResSend, ResLogin, ResCommon } from '@/untils/api.js'
	export default {
		data() {
			return {
				sends: {
					mobile: ''
				},
				code: '',
				show: false,
				checked: false,
				logUser: {
					iv: '',
					encrypteData: '',
					code: ''
				},
				loginIs: false, //判断登录方式

			}
		},
		methods: {
			async getSend() {
				this.loginIs = true // 验证码登录
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				// 判断验证码是否为空
				if (!this.sends.mobile) return uni.$showMsg('请输入手机号码')
				// 校验正则
				if (reg.test(this.sends.mobile)) {
					// 判断是否勾选
					if (!this.checked) return this.show = true
					// 发送请求
					const { data: res } = await ResSend(this.sends)
					// 请求失败
					if (res.code != 1) return uni.$showMsg('验证码获取失败')
					uni.navigateTo({
						url: `/pages/Login/Vecode?mobile=${this.sends.mobile}`
					})
					// 清空输入框
					this.sends.mobile = ''
				} else {
					uni.$showMsg('请输入正确的11位手机号码')
				}


			},
			consent() {
				this.checked = true
				this.show = false
				// 为true是验证码登录,为false是微信直接登录
				if (this.loginIs) {
					this.getSend()
				} else {
					this.dologin()
				}

			},
			noconsent() {
				this.show = false
			},
			ToMy() {
				uni.navigateBack()
			},
			checkboxChange(e) {
				console.log(e);
			},
			// 微信方式登录
			getPhoneNumber(e) {
				console.log(e);
				this.logUser.iv = e.detail.iv
				this.logUser.encrypteData = e.detail.encryptedData
				this.loginIs = false // 微信登录
				if (e.detail.errMsg != 'getPhoneNumber:ok') return uni.$showMsg('授权失败')
				// 判断是否勾选协议
				if (!this.checked) return this.show = true
				uni.$showMsg('授权成功')
				this.dologin()
			},

			// 获取code
			dologin() {
				uni.login({
					success: (res) => {
						this.logUser.code = res.code
						this.getLogin()
						this.getCommon()
					}
				})
			},
			// 发送请求
			async getLogin() {
				const { data: res } = await ResLogin(this.logUser)
				if (res.code != 1) return uni.$showMsg(res.msg)
				// 存储到vuex
				this.$store.commit('UpdateToken', res.data.userinfo.token)
				this.$store.commit('UpdateUserInfo', res.data.userinfo)
				uni.navigateBack()
			},
			// 获取版本号
			async getCommon() {
				const { data: res } = await ResCommon()
				uni.setStorageSync('version', res.data.version)
			},
			userone() {
				uni.navigateTo({
					url: '/pages/Agreement/Userment'
				})
			},
			usertwo() {
				uni.navigateTo({
					url: '/pages/Agreement/Policy'
				})
			},
			usertherr() {
				uni.navigateTo({
					url: '/pages/Agreement/Thirdparty'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		.login-top {
			padding: 0 52rpx;

			.top-title {
				margin: 73rpx 0 14rpx;
				font-size: 46rpx;
				font-weight: 700;
			}

			.top-txt {
				color: #9A9A9A;
				font-size: 30rpx;
			}

			.top-input {
				margin: 98rpx 0 80rpx;

				/deep/.u-label {
					font-weight: 700;
				}

				/deep/.u-flex-1 {
					font-weight: 700;
				}
			}

			.top-btn {
				height: 89rpx;
				color: #fff;
				background-color: #01C3A8;
				line-height: 89rpx;
				font-size: 30rpx;
			}
		}

		.login-bom {
			padding: 0 86rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.bom-title {
				text-align: center;
				color: #9A9A9A;
				font-size: 24rpx;
				position: relative;

				.bor-le,
					{
					width: 146rpx;
					border-bottom: 1px solid #DADADA;
					position: absolute;
					top: 18rpx;
					left: 60rpx;
				}

				.bor-rg {
					width: 146rpx;
					border-bottom: 1px solid #DADADA;
					position: absolute;
					top: 18rpx;
					right: 60rpx;
				}
			}

			.bom-img {
				display: flex;
				justify-content: center;
				margin: 57rpx 0 74rpx;
				position: relative;

				.btn {
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					top: 3rpx;
					left: 240rpx;
					border-radius: 50%;
					z-index: 1;
					opacity: 0.1;
				}

				bnutton.btn::after {
					border: none;
				}

				.img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}


			}

			.footer-box {
				color: #9A9A9A;
				padding-bottom: 26rpx;
				font-size: 24rpx;
				display: flex;

				/deep/.u-checkbox {
					width: 50rpx !important;
					margin-top: 5rpx;
				}

				.user {
					color: #4D6FB5;
				}


			}
		}



		// 弹框
		.pop-box {
			padding: 35rpx 32rpx;

			.pop-title {
				font-size: 34rpx;
				font-weight: 700;
				text-align: center;
			}

			.pop-txt {
				margin: 42rpx 0 55rpx;
				color: #9A9A9A;
				font-size: 24rpx;

				.user {
					color: #4D6FB5;
				}
			}

			.btnone {
				background-color: #01C3A8;
				color: #fff;
				margin-bottom: 32rpx;

			}
		}
	}
</style>
